<template>
	<div>
		<!--  <p>------ wangeditor编辑器 ------</p>
    <div id="wangeditor1"></div>
    <el-button @click="clear" type="primary" style="margin: 40px 0">清空</el-button>
    <div id="wangeditor2" class="toolbar"></div>
    <p>------ 我是分割线 ------</p>
    <div id="wangeditor3" class="text"></div> -->

		<p>------ vue2-editor编辑器 ------</p>
		<vue-editor
			v-model="content"
			use-custom-image-handler
			:editor-options="editorSettings"
			:custom-modules="customModulesForEditor"
			@image-added="handleImageAdded"
		/>
	</div>
</template>

<script>
/* eslint-disable */

// import E from "wangeditor";
import { VueEditor } from "vue2-editor";

// 引入后还需要在vue.config.js配置
import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
import axios from "axios";
export default {
	components: { VueEditor },
	data() {
		return {
			editor: {},
			content: "<h1>Initial Content</h1>",
			editorSettings: {
				modules: {
					imageDrop: true, // 图片拖入
					imageResize: {}, // 图片缩放
				},
			},
			customModulesForEditor: [
				{ alias: "imageDrop", module: ImageDrop },
				{ alias: "imageResize", module: ImageResize },
			],
		};
	},
	mounted() {
		// this.createWangeditor();
	},
	methods: {
		handleImageAdded(file, Editor, cursorLocation, resetUploader) {
			let formData = new FormData();
			formData.append("file", file);

			axios({
				url: "/test/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
				method: "POST",
				data: formData,
			})
				.then(result => {
					const url = result.data.data.path; // Get url from response
					Editor.insertEmbed(cursorLocation, "image", url);
					resetUploader();
				})
				.catch(err => {
					console.log(err);
				});
		},
		handlePaste(evt) {
			if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
				this.readFiles(evt.clipboardData.items, dataUrl => {
					const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
					if (userAgent.indexOf("Firefox") > -1) {
						const selection = this.quill.getSelection();
						if (selection) {
						} else {
							setTimeout(() => this.insert(dataUrl), 0);
						}
					} else {
						setTimeout(() => this.insert(dataUrl), 0);
					}
				});
			}
		},
		createWangeditor() {
			/* 第一个编辑器 */
			this.editor = new E("#wangeditor1");
			//   console.log(this.editor);
			//   this.editor.config.height = 200;
			//   this.editor.config.zIndex = 500;
			//   this.editor.config.focus = false;
			//   this.editor.config.placeholder = "自定义 placeholder 提示文字";
			this.editor.config.onchange = html => {
				console.log(html);
				// console.log(this.editor.txt.html());
				// console.log(this.editor.txt.text());
				// console.log(this.editor.txt.getJSON());
			};
			//   this.editor.con
			this.editor.colors = ["#339999", "#339999"]; // 无效
			const SINA_URL_PATH = "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/";
			// 微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴',
			this.editor.config.emotions = [
				{
					title: "微信", // tab 的标题
					type: "image", // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
					content: [
						{
							alt: "[坏笑]",
							src: `${SINA_URL_PATH}/3.gif`,
						},
						{ alt: "[舔屏]", src: `${SINA_URL_PATH}/1.gif` },
						{ alt: "[污]", src: `${SINA_URL_PATH}/2.gif` },
					],
				},
				{
					title: "emoji", // tab 的标题
					type: "emoji", // 'emoji' / 'image'
					// emoji 表情，content 是一个数组即可
					content: "😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐".split(/\s/),
				},
			];

			//   this.editor.config.menus = ["bold", "head", "link", "italic", "underline"];// 配置菜单栏，删减菜单，调整顺序
			this.editor.create();
			//   this.editor.txt.html("<p>用 JS 设置的内容</p>"); // 重新设置编辑器内容

			/* 第二个编辑器，并且tab和content分离 */
			const editor2 = new E("#wangeditor2", "#wangeditor3");

			editor2.create();
		},
		clear() {
			this.editor.txt.clear();
		},
	},
};
</script>

<style lang="scss" scoped>
.toolbar {
	background-color: #f1f1f1;
	border: 1px solid #ccc;
}
.text {
	border: 1px solid #ccc;
	height: 200px;
}
</style>
